import Vue from 'vue'
import Vuex from 'vuex'
import {
  INCREMENT,
  DECREMENT
} from "./mutation-types";

// 1.安装插件
Vue.use(Vuex)

// 2.创建对象
const modulesA={
  state:{
    name:'橘子皮'
  },
  mutations:{
    updateName(state,payload){
      state.name=payload
    }
  },
  getters:{
    fullName(state){
      return state.name + '1111'
    },
    fullName2(state,getters){
      return getters.fullName + '2222'
    },
  //在模块里，有第三个参数，rootState
    fullName3(state,getters,rootState){
      return getters.fullName2 + rootState.counter
    }
  },
  actions:{
  //  模块里的context 指的是 在当前模块, context.commit提交的是模块里的mutation里的方法
    aUpdateName(context){
      setTimeout(() => {
        context.commit('updateName','俊哲批2')
      },1000)
    }
  }
}
const modulesB={
  state:{},
  mutations:{},
  getters:{},
  actions:{}
}

const store=new Vuex.Store({
  //
  state:{
    counter:100,
    students:[
      {id:110,name:'阿絮',age:30},
      {id:111,name:'老温',age:29},
      {id:112,name:'张哲瀚',age:19},
      {id:113,name:'龚俊',age:18},
    ],
    info:{name:'发财树',age:24,height:1.86}
  },
  mutations:{
  //  方法,默认有一个参数叫state，对应上面的state
    [INCREMENT](state){
      state.counter++
    },
    // 变量常量当做方法名要加 []
    [DECREMENT](state){
      state.counter--
    },
    // incrementCount(state,count){
    //      state.counter+=count
    // },
    // 这种特殊的提交方法传过来的第二个参数，是一个对象
    incrementCount(state,payload){
      state.counter += payload.count
    },
    addStudent(state,stu){
      state.students.push(stu)
    },
    updateInfo(state){
      // 更改info里的属性值，是响应式的
      state.info.name='龚俊和张哲瀚的粉丝'
      // 增加info里的属性,以下方法增加不是响应式的
      //  state.info['address']='中国'
      // 增加info里的属性，使用vue.set(要修改的对象,新增的属性名，新增的属性值)是响应式的
      // Vue.set(state.info,'address','中国')
      // 删除info的一个属性，使用以下方法不是响应式的
      // delete state.info.age
      // 删除info的一个属性,使用Vue.delete(要删除的对象，要删除的属性名)是响应式的
      //  Vue.delete(state.info,'age')
    }
  },
  actions:{
    //actions里的方法，会有一个默认参数，context：上下文  这里的context值store对象
    // aUpdateInfo(context,payload){
    //   setTimeout(() => {
    //     context.commit('updateInfo')
    //     console.log(payload.message); // 12345
    //     payload.success() // 里面已经完成了
    //   },1000)
    // }

    //方法二
    aUpdateInfo(context,payload){
      return new Promise((resolve,reject) => {
        setTimeout(() => {
          context.commit('updateInfo')
          console.log(payload); // 12345
          resolve(1111)
        },1000)
      })
    }
  },
  getters:{
  // getters里的方法也有一个state默认参数
    powerCounter(state){
      return state.counter * state.counter
    },
    more20stu(state){
      return state.students.filter(student => student.age >= 20)
    },
    // getters里的方法：除state默认参数，还可以传getters为第二个参数,名字不叫getters也可以
    more20stuLength(state,getters){
      return getters.more20stu.length
    },
    // 当在组件里调用getters需要传参数时，可以返回一个函数
    moreAgestu(state){
     // return function(age){
     //   return state.students.filter(student => student.age >= age)
      return age => {
        return state.students.filter(student => student.age >= age)
      }
    }
  },
  modules:{
    //modules里的a模块里的state，最终会放到state里面，所有展示数据的时候使用$store.state.a.name
    a: modulesA,
    b: modulesB
  }
})

//3.导出store对象
export default store



// 对象的结构：
const obj={
  name:'瀚瀚',
  age:20,
  height:1.81,
  lover:'俊俊'
}
// 根据名字取出，顺序不影响，也可以只取一部分
const {name,height,age} = obj
console.log(name); // 瀚瀚
console.log(age); // 20